<template>
	<div class="eat_share">

		<!-- <img class="swiper" v-for="item in banner" :src="item" alt=""> -->


		<!-- swiper魔板 -->
		<template>
			<swiper :options="swiperOption" ref="mySwiper">
				<!-- slides -->
				<swiper-slide v-for="item in swiperSlides">
					<img class="swiper"  :src="item" alt="">
				</swiper-slide>

							<!-- Optional controls -->
			    <!-- <div class="swiper-pagination"  slot="pagination"></div>
			    <div class="swiper-button-prev" slot="button-prev"></div>
			    <div class="swiper-button-next" slot="button-next"></div>
			    <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
			</swiper>
		</template>


<!-- 用户信息 -->
<div class="zPinUser" >
	<div class="z_PinUser">
		<img :src="user.user_img"  alt="">
		<div class="center">
			<div class="titlez">
				<span>{{user.alias}}</span>
				<img src="../assets/img/yStar.png"  alt="">
			</div>
			<div class="time_adres">
				<span>{{list.riqi}}</span>
				<span>{{list.address}}</span>
			</div>
		</div>
		<div class="wei">
			<span class="time_wei"> + 关注</span>
			<div class="timeR_wei">
				<img src="../assets/img/eye.png"  alt="">
				<span v-if="list.cishu < 1000">{{list.cishu}}+</span>
				<span v-else>999+</span>
			</div>
		</div>
	</div>
	<p class="pinglun_User">{{list.ss_jl}}</p>
</div>

<!-- aboutCai -->
<div class="aboutCai">
	<div class="titleAboutCai">
		- &#160;&#160;关联菜谱&#160;&#160; -
	</div>
	<div class="caipu">
		<img :src="caipu.fengmian" alt="">
	</div>

</div>

<!-- user_z_tcaipu -->
<div class="user_z_tcaipu">
	<div class="line01_user_z_tcaipu">
		<span>{{caipu.title}}</span>
		<img :src="user1.user_img" alt="">
	</div>
	<div class="line02_user_z_tcaipu">
		<div>

			<span>{{caipu.tongji}}人做过

			</span>
			<span class="rLine">|</span>

			<span>{{caipu.dianzan}}人收藏

			</span>
		</div>
		<div>
			<!-- <img :src="caipu.fengmian" alt=""> -->
			<span>{{user1.alias}}</span>
		</div>
	</div>
</div>

<!-- wucan -->
<div class="wucan_box">
	<img src="../assets/img/left.png" alt="">
	<span>午餐</span>
	<img src="../assets/img/right.png" alt="">
</div>

</div>
</template>

<script>

import { swiper, swiperSlide } from 'vue-awesome-swiper';
 

export default {
	name: 'eat_share',
	data () {
		return {
			msg: 'eat_share',
			list:{},
			caipu:{},
			user:{},
			user1:{},
			swiperSlides: [],
			swiperIndex: 0,
			swiperOption: {


				observer:true,//修改swiper自己或子元素时，自动初始化swiper 
			　　observeParents:true,//修改swiper的父元素时，自动初始化swiper 
			　　loop:true,
			　　autoplay: {
				　　　　delay: 100,
				　　disableOnInteraction: false
			　　},


	          // NotNextTick is a component's own property, and if notNextTick is set to true, the component will not instantiate the swiper through NextTick, which means you can get the swiper object the first time (if you need to use the get swiper object to do what Things, then this property must be true)
	          // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
	          notNextTick: true,
	          // swiper configs 所有的配置同swiper官方api配置
	          autoplay: 3000,
	          // direction : 'vertical',
	          grabCursor : true,
	          setWrapperSize :true,
	          autoHeight: true,
	          pagination : '.swiper-pagination',
	          paginationClickable :true,
	          prevButton:'.swiper-button-prev',
	          nextButton:'.swiper-button-next',
	          scrollbar:'.swiper-scrollbar',
	          mousewheelControl : true,
	          observeParents:true,
	          // if you need use plugins in the swiper, you can config in here like this
	          // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
	          debugger: true,

	          // swiper callbacks
	          // swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
	          onTransitionStart(swiper){
	            // console.log(swiper)
	        }
	          // more Swiper configs and callbacks...
	          // ...
	      }
	  }
	},
	created () {
		// function getUrlParam(name) {
	 //        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
	 //        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
	 //        if (r != null) return unescape(r[2]); return null; //返回参数值
	 //    }
	    function getUrlParam(name) {
	        var canname = name
	        var json = {}
	        var href = location.hash
	        var hrefUrl = href.split('?')
	        console.log(hrefUrl[1])
	        if(hrefUrl[1].indexOf('&') > 0){
	          //有 & 
	          var hrefArr = hrefUrl[1].split('&')
	          console.log(hrefArr)
	          for (var i = 0; i < hrefArr.length; i++) {
	            var hrefAllArr = hrefArr[i].split('=')
	            json[hrefAllArr[0]] = hrefAllArr[1]
	            return json[canname]
	          }
	        }else{
	          //没有& 
	          var hrefUrlarr = hrefUrl[1].split('=')
	          json[hrefUrlarr[0]] = hrefUrlarr[1]
	          console.log(canname)
	          console.log(json)
	          return json[canname]
	        }
	      }
		let ss_id  = getUrlParam('ss_id')
		this.axios.post('http://api-wei.zhenlvw.com/v2/meishi.api.fxsmsxiangqing',{'ss_id':ss_id})
		.then((res)=>{
			console.log(res.data.data)
			this.swiperSlides = res.data.data.list.img_url.reverse()
			this.list = res.data.data.list
			this.caipu = res.data.data.list.caipu
			this.user1 = res.data.data.list.caipu.user
			this.user = res.data.data.list.user
			console.log(this.swiperSlides)
		})
		.catch((err)=>{
			console.log(err);
		})
		$("title").html("eat_share");
	}, 

	computed:{
		swiper() {
			return this.$refs.mySwiper.swiper
		}
	},
	components:{
		swiper,
		swiperSlide
	},
	mounted (){
		console.log('this is current swiper instance object', this.swiper)
		this.swiper.slideTo(2, 1000, false); 
	},

	methods:{ 

	}

	
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

	.eat_share{
		padding-bottom: 1rem;
	}
	.swiper{
		width: 100%;
		height: 6.03rem;
	}

	.swiper-container {
		width: 100%;
		height: 6.03rem;
		margin: 0px auto;
	}

	/*用户信息*/
	.zPinUser{
		width: 100%;
		padding-bottom: 0.6rem;
		border-bottom: 1px solid #DFE0E0;
	}
	.z_PinUser{
		width: 6.8rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 0.31rem;
		margin-top:0.4rem;
		margin-bottom: 0.3rem;
	}
	.z_PinUser>img{
		width: 1.2rem;
		height: 1.2rem;
		border-radius: 50%;
		margin-right: 0.20rem;
	}
	.z_PinUser .center{
		flex:1;
		height: 0.8rem;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0.2rem 0rem;
	}
	.z_PinUser .center .titlez{
		display: flex;
		font-size:0.32rem;
		font-family:PingFangSC;
		color:rgba(0,0,0,1);
		align-items: center;
	}
	.z_PinUser .center .titlez img{
		width: 0.26rem;
		height: 0.35rem;
		margin-left: 0.1rem;
	}
	.z_PinUser .center .time_adres{
		flex:1;
		display: flex;
		align-items: center;
	}
	.z_PinUser .center .time_adres span:nth-child(1){
		font-size:0.24rem;
		font-family:PingFangSC;
		color:rgba(179,175,175,1);
		margin-right: 0.1rem;
	}
	.z_PinUser .center .time_adres span:nth-child(2){
		font-size:0.24rem;
		font-family:PingFangSC;
		color:rgba(44,123,140,1);
	}
	.z_PinUser .wei{
		width: 1.1rem;
		display: flex;
		flex-direction: column;
		color:rgba(144,144,146,1);
		justify-content: flex-end;
	}
	.z_PinUser .wei .time_wei{
		width:1.1rem;
		height:0.44rem;
		border:1px solid #2C7B8C;
		color:#2C7B8C;
		text-align: center;
		display: inline-block;
	}
	.z_PinUser .wei .timeR_wei{
		display: flex;
		color:rgba(144,144,146,1);
		align-items: center;
		justify-content: flex-end;
	}
	.z_PinUser .wei .timeR_wei img{
		width: 0.4rem;
		height: 0.24rem;
		margin-right: 0.1rem;
	}
	.z_PinUser .wei.timeR_wei span{
		font-size:0.24rem;
		font-family:PingFangSC;
		color:rgba(179,175,175,1);
	}
	.pinglun_User{
		width: 6.88rem;
		margin-left:0.31rem;
		font-size:0.32rem;
		font-family:PingFangSC;
		color:#000;
	}

	/**/


	/*关联菜谱*/
	.aboutCai{
		width: 100%;

	}
	.titleAboutCai{
		text-align: center;
		font-size:0.32rem;
		font-family:PingFangSC;
		color:rgba(44,123,140,1);
		margin:0.7rem 0rem 0.78rem 0rem;
	}
	.caipu{
		width: 100%;
	}
	.caipu img{
		width: 100%;
		height: 4rem;
	}

	.user_z_tcaipu{
		width: 7rem;
		margin-left: 0.31rem;
		margin-top: 0.2rem;
		padding-bottom: 0.2rem;
	}
	.line01_user_z_tcaipu{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items:  flex-end ;
	}
	.line02_user_z_tcaipu{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items:  center ;
		margin-top: 0.2rem;
	}
	.line01_user_z_tcaipu span{
		font-size:0.36rem;
		font-family:PingFangSC;
		color:rgba(2,2,2,1);
	}
	.line01_user_z_tcaipu img{
		width: 0.88rem;
		height: 0.88rem;
		border-radius: 50%;
	}
	.line02_user_z_tcaipu div:nth-child(1){
		display: flex;
		align-content:flex-end;
	}
	.line02_user_z_tcaipu div:nth-child(1) img{
		width:0.36rem;
		height:0.36rem;
	}
	.line02_user_z_tcaipu div:nth-child(1) span{
		font-size:0.28rem;
		font-family:PingFangSC;
		color:rgba(2,2,2,1);
		display: flex;
		align-self:flex-end;
	}

	.line02_user_z_tcaipu div:nth-child(1) .rLine{
		color:#FB775E;
		margin:0rem 0.1rem;
	}


	.line02_user_z_tcaipu div:nth-child(2){
		display: flex;
		align-items: center;
	}
	.line02_user_z_tcaipu div:nth-child(2) img{
		width: 0.29rem;
		height: 0.39rem;
	}
	.line02_user_z_tcaipu div:nth-child(2) span{
		font-size:0.28rem;
		font-family:PingFangSC;
		color:#FB775E;
	}

	/*午餐*/
	.wucan_box{
		width: 100%-3rem;
		padding:0rem 1.5rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 0.6rem;
	}
	.wucan_box img{
		width: 0.33rem;
		height: 0.56rem;
	}
	.wucan_box span{
		width: 1.8rem;
		height: 0.56rem;
		display: block;
		border: 0.01rem solid #2C7B8C;
		text-align: center;
		line-height: 0.56rem;
		font-size:0.40rem;
		font-family:PingFangSC;
		color:rgba(44,123,140,1);
	}
	</style>
